<template>
<div>
    <div>

        <van-search v-model="value" show-action placeholder="请输入要查询的会议名称" @search="onSearch" @cancel="onCancel" />

        <div class="team">
            <van-field readonly name="meetingRoom" clickable label="会议室" :value="value1" placeholder="选择会议室" @click="mqinAi1" />
            <div v-if="myIf1">
                <van-popup v-model="showPicker" position="bottom">
                    <van-picker title="请选会议室" show-toolbar :columns="columns1" @cancel="showPicker = false" @confirm="onConfirm1" />
                </van-popup>
            </div>
        </div>

        <van-cell-group>
            <van-field name="starttime" v-model="starttime" clearable label="开始时间" placeholder="请输入开始时间" @focus="start" />
            <van-field name="endtime" v-model="endtime" clearable label="结束时间" placeholder="请输入结束时间" @focus="end" />
        </van-cell-group>
        <!-- 开始时间控件 -->
        <van-popup v-model="show" position="bottom">
            <van-datetime-picker v-model="currentDate" type="datetime" :min-date="minDate" :max-date="maxDate" @confirm="confirm" @cancel="cancel" :formatter="formatter" />
        </van-popup>

        <!-- 结束时间控件 -->
        <van-popup v-model="show1" position="bottom">
            <van-datetime-picker v-model="currentDate1" type="datetime" :min-date="minDate" :max-date="maxDate" @confirm="confirm1" @cancel="cancel1" :formatter="formatter" />
        </van-popup>
    </div>

    <div>
        <div class="van-hairline--surround">
            meetingRoomName
            <div class="van-hairline--top"></div>
            <div class="van-hairline--surround">
                <van-field label="开始时间" value="输入框只读" readonly />
                <van-field label="结束时间" value="输入框只读" readonly />
                <van-field label="会议名称" value="输入框只读" readonly />
                <van-field label="主办单位" value="输入框只读" readonly />
            </div>
            <div class="van-hairline--top">
                <van-row gutter="20">
                    <van-col span="8">
                        <van-field label="申请人" value="输入框只读" readonly />
                    </van-col>
                    <van-col span="8">
                        <van-field label="参会人数" value="输入框只读" readonly />
                    </van-col>

                </van-row>
            </div>
        </div>
    </div>

</div>
</template>

<script>
export default {

    data() {
        return {

            myIf1: false,
            value1: '',
            value2: '',
            value: '',
            showPicker: false,
            showPicker1: false,
            showPicker2: false,
            columns1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
            show: false, //开始时间弹窗
            show1: false, //结束时间弹窗,
            currentDate: new Date(), //开始标准时间
            currentDate1: new Date(), //结束标准时间
            starttime: "", //开始时间
            starttime1: "", //开始时间时间戳
            endtime: "", //结束时间
            endtime1: "", //结束时间时间戳
        }

    },
    created() {

    },
    methods: {
        onSearch(val) {
            alert(val);
        },
        onCancel() {
            alert('取消');
        },
        onConfirm1(e) {
            this.value1 = e
            this.showPicker = false
        },
        onConfirm2(e) {
            this.value2 = e
            this.showPicker = false
        },
        onConfirm3(e) {
            this.value3 = e
            this.showPicker = false
        },
        mqinAi1() {
            this.myIf1 = true
            this.myIf2 = false
            this.myIf3 = false
            this.myIf4 = false
            this.myIf5 = false
            this.showPicker = true
        },
        mqinAi2() {
            this.myIf1 = false
            this.myIf2 = true
            this.myIf3 = false
            this.myIf4 = false
            this.myIf5 = false
            this.showPicker = true
        },
        mqinAi3() {
            this.myIf1 = false
            this.myIf2 = false
            this.myIf3 = true
            this.myIf4 = false
            this.myIf5 = false
            this.showPicker1 = true
        },
        mqinAi4() {
            this.myIf1 = false
            this.myIf2 = false
            this.myIf3 = false
            this.myIf4 = true
            this.myIf5 = false

            this.showPicker2 = true
        },

        mqinAi5() {
            this.myIf1 = false
            this.myIf2 = false
            this.myIf3 = false
            this.myIf4 = false
            this.myIf5 = true
            this.showPicker = true
        },

        start() {
            this.show = true;
        },
        // 选择结束时间
        end() {
            this.show1 = true;
        },
        // 点击确定
        confirm() {
            this.show = false;
            this.starttime =
                this.currentDate.getFullYear() +
                "年" +
                (Number(this.currentDate.getMonth()) + 1) +
                "月" +
                this.currentDate.getDate() +
                "日 " +
                this.currentDate.getHours() +
                ":" +
                this.currentDate.getMinutes();
            this.starttime1 = new Date(this.currentDate).getTime() / 1000;
        },
        // 点击取消
        cancel() {
            this.show = false;
        },
        confirm1() {
            this.show1 = false;
            this.endtime =
                this.currentDate1.getFullYear() +
                "年" +
                (Number(this.currentDate1.getMonth()) + 1) +
                "月" +
                this.currentDate1.getDate() +
                "日 " +
                this.currentDate1.getHours() +
                ":" +
                this.currentDate1.getMinutes();
            this.endtime1 = new Date(this.currentDate1).getTime() / 1000;
        },
        cancel1() {
            this.show1 = false;
        },
        // 处理控件显示的时间格式
        formatter(type, value) {
            // 格式化选择器日期
            if (type === "year") {
                return `${value}年`;
            } else if (type === "month") {
                return `${value}月`;
            } else if (type === "day") {
                return `${value}日`;
            } else if (type === "hour") {
                return `${value}时`;
            } else if (type === "minute") {
                return `${value}分`;
            }
            return value;
        }
    },

}
</script>
